<template>
    <div>
        <div style="display: flex;flex-direction: row;justify-content: center">
            <el-input v-model="inputInfo" clearable style="width: 200px;margin-right: 10px" type="text"></el-input>
            <el-button icon="el-icon-search" size="medium" style="margin-left: 10px"
                       type="success" @click="handleCitySearch">搜索
            </el-button>
            <el-button icon="el-icon-plus" size="medium"
                       style="margin-left: 100px" type="primary"
                       @click="handleCityAddition">新增
            </el-button>
        </div>
        <div style="display: flex;align-items: center;flex-direction: column;margin-left: -25px">
            <el-table :key="centerDialogVisible"
                      :data="cities"
                      stripe
                      style="width: 90%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-table :data="props.row.traffic">
                            <el-table-column label="道路名称" prop="roadName"></el-table-column>
                            <el-table-column label="道路起点" prop="start"></el-table-column>
                            <el-table-column label="道路终点" prop="end"></el-table-column>
                            <el-table-column label="道路长度" prop="length_"></el-table-column>
                            <el-table-column label="备注" prop="desc"></el-table-column>
                        </el-table>
                    </template>
                </el-table-column>
                <el-table-column label="ID" prop="id" width="50px"></el-table-column>
                <el-table-column label="城市名称" prop="name" width="100px"></el-table-column>
                <el-table-column label="城市编号" prop="number"></el-table-column>
                <el-table-column label="所属省份" prop="province" width="100px"></el-table-column>
                <el-table-column label="救援人数" prop="rescueNumber" width="100px"></el-table-column>
                <el-table-column label="救援车辆" prop="rescueVehicles" width="100px"></el-table-column>
                <el-table-column label="交通情况" prop="name"></el-table-column>
                <el-table-column label="城市编码" prop="code"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                :page-size="2"
                :total="paginationTotal"
                background
                layout="prev, pager, next"
                style="margin-top: 5px">
            </el-pagination>
        </div>
        <el-dialog
            :title="title"
            :visible.sync="centerDialogVisible"
            width="60%">
            <el-dialog
                width="40%"
                class="inner-el-dialog"
                title="新增道路"
                :visible.sync="innerVisible"
                append-to-body>
                <el-form :model="selectedRoad" class="roadForm">
                    <el-form-item label="道路名称:" prop="roadName">
                        <el-input v-model="selectedRoad.roadName"></el-input>
                    </el-form-item>
                    <el-form-item label="备注:" prop="desc">
                        <el-input v-model="selectedRoad.desc"></el-input>
                    </el-form-item>
                    <el-form-item label="道路起点:" prop="start">
                        <el-cascader
                            v-model="selectedRoad.start"
                            :options="options"
                            :show-all-levels="false"
                            :props="{ expandTrigger: 'hover' }"
                            @change="handleChange"></el-cascader>
                    </el-form-item>
                    <el-form-item label="道路终点:" prop="end">
                        <el-cascader
                            v-model="selectedRoad.end"
                            :options="options"
                            :props="{ expandTrigger: 'hover' }"
                            @change="handleChange">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item label="道路长度:" prop="length_">
                        <el-input v-model="selectedRoad.length_"></el-input>
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="innerVisible = false;">取 消</el-button>
                    <el-button type="primary" @click="handleInnerDialogEnter">确 定</el-button>
                </div>
            </el-dialog>
            <el-form :model="selectedCity" class="selectedCityForm">
                <el-form-item label="城市名称:" prop="name">
                    <el-input v-model="selectedCity.name" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="城市编号:" prop="number">
                    <el-input v-model="selectedCity.number" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="所属省份:" prop="province">
                    <el-input v-model="selectedCity.province" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="救援人数:" prop="rescueNumber">
                    <el-input v-model="selectedCity.rescueNumber" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="城市编码:" prop="code">
                    <el-input v-model="selectedCity.code" disabled></el-input>
                </el-form-item>

                <el-form-item label="救援车辆:" prop="rescueVehicles">
                    <el-input v-model="selectedCity.rescueVehicles"></el-input>
                </el-form-item>

                <el-form-item label="交通情况:" prop="traffic" style="width: 100%">
                    <el-table :key="innerVisible"
                              :data="selectedCity.traffic"
                              stripe>
                        <el-table-column label="道路名称" prop="roadName"></el-table-column>
                        <el-table-column label="道路起点" prop="start"></el-table-column>
                        <el-table-column label="道路终点" prop="end"></el-table-column>
                        <el-table-column label="道路长度" prop="length_"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleRoadDelete(scope.$index, scope.row)">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary"
                           @click="handleRoadAddition"
                    style="float: left;">添加道路</el-button>
                <el-button @click="centerDialogVisible = false;">取 消</el-button>
                <el-button type="primary" @click="handleDialogEnter">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import variables from "@/assets/variables";

export default {
    name: "CityMaintenance",
    data() {
        return {
            cities: [],
            options: [],
            title: "",
            inputInfo: "",
            centerDialogVisible: false,
            innerVisible: false,
            selectedCity: {},
            selectedCityIndex: -1,
            selectedRoad: {},
            count: 0,
        }
    },
    methods: {
        handleCityAddition() {
            this.title = "新增";
            this.centerDialogVisible = true;
            this.selectedCity = {
                id: this.cities.length + 1,
                number: (Array(3).join('0') + (this.cities.length+1)).slice(-3),
                code: new Date().getTime().toString(),
                traffic: [],
            };
        },
        handleCitySearch() {
            if (this.inputInfo === "") {
                this.cities = variables.cities;
            } else {
                this.cities = variables.cities.filter(city =>
                    city.name.includes(this.inputInfo) ||
                    city.province.includes(this.inputInfo) ||
                    city.rescueNumber.includes(this.inputInfo) ||
                    city.rescueVehicles.includes(this.inputInfo) ||
                    city.number.includes(this.inputInfo)
                );
            }
        },
        handleEdit(index, obj) {
            this.title = "修改";
            this.centerDialogVisible = true;
            this.selectedCityIndex = index;
            this.selectedCity = JSON.parse(JSON.stringify(obj));
        },
        handleDelete(index) {
            this.cities.splice(index, 1);
            this.$message({
                type: "success",
                message: "删除成功",
            })
        },
        handleRoadDelete(index) {
            this.selectedCity.traffic.splice(index, 1);
            this.$message({
                type: "success",
                message: "删除成功",
            })
        },
        handleDialogEnter() {
            if (this.title === "新增") {
                this.cities.push(this.selectedCity);
            } else {
                this.cities[this.selectedCityIndex] = this.selectedCity;
            }
            this.centerDialogVisible = false;
        },
        handleRoadAddition() {
            this.innerVisible = true;
        },
        handleInnerDialogEnter() {
            this.selectedCity.traffic.push(this.selectedRoad);
            this.selectedRoad = {};
            this.$message({
                type: "success",
                message: "添加成功",
            });
            this.innerVisible = false;
        },
        handleChange(v) {
            if (v === undefined) return;
            this.count += 1;
            if (this.count % 2 === 1) {
                this.selectedRoad.start = this.selectedRoad.start[1];
                const a = v[0];
                const b = v[1];
                for (let i in this.options) {
                    if (a===this.options[i].value) {
                        const c = this.options[i].children;
                        for (let j in c) {
                            if (b===c[j].value) {
                                c[j].disabled = true;
                                break;
                            }
                        }
                    }
                }
            }else {
                // 终点
                this.selectedRoad.end = this.selectedRoad.end[1];
                this.options = variables.roadStartAndEnd;
                this.count = 0;
            }

        }
    },
    mounted() {
        this.cities = variables.cities;
        this.options = variables.roadStartAndEnd;
    },
    computed: {
        paginationTotal() {
            return this.cities.length;
        },
    }
}
</script>

<style scoped>
.selectedCityForm {
    height: 300px;
}

.selectedCityForm >>> .el-form-item {
    display: inline-block;
    width: 260px;
    float: left;
    margin: 5px 15px;
}

.roadForm {
    height: 300px;
}

.roadForm >>> .el-form-item {
    display: inline-block;
    width: 253px;
    float: left;
    margin: 5px 15px;
}

</style>